<template>
  <nav :style="computedNavStyle" class="nav-links">
    <router-link
      v-for="(link, index) in links"
      :to="link.path"
      :key="index"
      class="nav-link"
      exact-active-class="active"
      >{{ link.name }}</router-link
    >
  </nav>
</template>

<script>
export default {
  name: "NavBar",
  props: {
    links: {
      type: Array,
      required: true,
      default: () => [],
    },
    navStyle: {
      type: Object,
      default: () => ({
        // 其他样式
      }),
    },
    position: {
      type: String,
      default: "bottom",
      validator: (value) => {
        return ["top", "bottom"].includes(value);
      },
    },
  },
  computed: {
    computedNavStyle() {
      let style = { ...this.navStyle };
      if (this.position === "bottom") {
        style.position = "fixed";
        style.top = "97%";
        style.width = "100%";
        style.left = "0";
        style.right = "0";
        style.transform = "translateY(-50%)";
        style.display = "flex";
        style.fontSize = "20px"; // 设置底部时的字体大小
        // 其他底部时的样式设置
      } else if (this.position === "top") {
        style.position = "fixed";
        style.top = "0";
        style.width = "100%";
        style.left = "0";
        style.right = "0";
        style.fontSize = "18px"; // 设置顶部时的字体大小
        // 其他顶部时的样式设置
        // 例如，您可以设置不同的背景色、边框样式等
      }
      style.justifyContent = "space-around";
      return style;
    },
  },
};
</script>

<style scoped>
.nav-links {
  display: flex;
}

.nav-link {
  font-size: 16px;
  text-decoration: none;
  color: #6c757d;
  transition: color 0.3s ease;
  margin: 0 10px;
}

.active {
  color: #007bff;
}

@media (max-width: 600px) {
  .nav-link {
    font-size: 14px;
    padding: 10px;
  }
}
</style>
